<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery File Upload Example</title>
    <script src="${pageContext.request.contextPath}/resources/libs/jQueryFileUpload/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/resources/libs/jQueryFileUpload/js/vendor/jquery.ui.widget.js"></script>
    <script src="${pageContext.request.contextPath}/resources/libs/jQueryFileUpload/js/jquery.iframe-transport.js"></script>
    <script src="${pageContext.request.contextPath}/resources/libs/jQueryFileUpload/js/jquery.fileupload.js"></script>
    <script src="${pageContext.request.contextPath}/resources/libs/bootstrap/js/bootstrap.min.js"></script>
    <link href="${pageContext.request.contextPath}/resources/libs/bootstrap/css/bootstrap.css" type="text/css"
          rel="stylesheet"/>
    <style>
        .bar {
            height: 18px;
            background: green;
        }
    </style>
</head>
<body>

<input id="fileupload" type="file" name="files[]" data-url="${pageContext.request.contextPath}/file/upload" multiple>

<div id="progress">
    <div class="bar" style="width: 0%;"></div>
</div>

<script>
    $(function () {
        $('#fileupload').fileupload({
            dataType: 'json',
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                console.info(data.loaded, data.total);
                $('#progress .bar').css(
                        'width',
                        progress + '%'
                );
            },
            done: function (e, data) {
                debugger;
                $.each(data.files, function (index, file) {
                    $('<p/>').text(file.name).appendTo(document.body);
                });
            }
        });
    });
</script>
</body>
</html>